<template>
    <div class="container">
        <div class="page-header">
            <div class="back-button">
                <el-button @click="goBack" icon="el-icon-back">返回</el-button>
            </div>
            <h1>员工入职信息核定表</h1>
        </div>
        <div class="form-actions" v-if="!isView">
            <el-button type="primary" @click="handleSubmit">保存</el-button>
            <el-button type="success" @click="goToList">列表</el-button>
            <el-button type="success" @click="handlePrint">打印</el-button>
            <el-button @click="handleReset">重置</el-button>
        </div>
        <el-form :model="formData" ref="form" label-width="150px">
            <table border="1">
                <tbody>
                    <tr>
                        <td>招聘经办人</td>
                        <td><el-input v-model="formData.recruitmentAgent" :disabled="isView"></el-input></td>
                        <td>用人单位面试人</td>
                        <td><el-input v-model="formData.interviewer" :disabled="isView"></el-input></td>
                    </tr>
                    <tr>
                        <td>面试时间</td>
                        <td>
                            <el-date-picker v-model="formData.interviewTime" type="date" :disabled="isView"
                                value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择面试时间"
                                :picker-options="datePickerOptions"
                                @change="handleDateChange('interviewTime')"></el-date-picker>
                        </td>
                        <td>报到时间</td>
                        <td>
                            <el-date-picker v-model="formData.reportTime" type="date" :disabled="isView"
                                value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择报到时间"
                                :picker-options="datePickerOptions"
                                @change="handleDateChange('reportTime')"></el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>拟派部门</td>
                        <td><el-input v-model="formData.department" :disabled="isView"></el-input></td>
                        <td>拟定岗位</td>
                        <td><el-input v-model="formData.position" :disabled="isView"></el-input></td>
                    </tr>
                    <tr>
                        <td>入职培训人</td>
                        <td><input v-model="formData.onboardingTrainer" type="text"></td>
                        <td>岗前培训人</td>
                        <td><input v-model="formData.preJobTrainer" type="text"></td>
                    </tr>
                    <tr>
                        <td>传、帮、带责任人（岗位）</td>
                        <td><input v-model="formData.mentorPosition" type="text"></td>
                        <td>职业规划导师（用人部门）</td>
                        <td><input v-model="formData.careerMentor" type="text"></td>
                    </tr>
                </tbody>
            </table>

            <table border="1">
                <thead>
                    <tr>
                        <th rowspan="2">拟核薪资</th>
                        <th colspan="2">薪资福利</th>
                    </tr>
                    <tr>
                        <th>标准</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>基本工资</td>
                        <td><input v-model.number="formData.basicSalary" type="number"></td>
                        <td><input v-model="formData.basicSalaryNote" type="text"></td>
                    </tr>
                    <tr>
                        <td>加班工资</td>
                        <td><input v-model.number="formData.overtimePay" type="number"></td>
                        <td><input v-model="formData.overtimePayNote" type="text"></td>
                    </tr>
                    <tr>
                        <td>工龄</td>
                        <td><input v-model.number="formData.seniority" type="number"></td>
                        <td><input v-model="formData.seniorityNote" type="text"></td>
                    </tr>
                    <tr>
                        <td>绩效</td>
                        <td><input v-model.number="formData.performancePay" type="number"></td>
                        <td><input v-model="formData.performancePayNote" type="text"></td>
                    </tr>
                    <tr>
                        <td>岗位津贴</td>
                        <td><input v-model.number="formData.postAllowance" type="number"></td>
                        <td><input v-model="formData.postAllowanceNote" type="text"></td>
                    </tr>
                    <tr>
                        <td>其它</td>
                        <td><input v-model.number="formData.otherPay" type="number"></td>
                        <td><input v-model="formData.otherPayNote" type="text"></td>
                    </tr>
                    <tr>
                        <td>合计</td>
                        <td style="text-indent:-18px">{{ calculateTotal() }}</td>
                        <td></td>
                    </tr>
                </tbody>
            </table>

            <table border="1">
                <thead>
                    <tr>
                        <th>签批人员</th>
                        <th>签名</th>
                        <th>日期</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>人资主管/经理</td>
                        <td><input v-model="formData.hrManagerSignature" type="text"></td>
                        <td>
                            <el-date-picker v-model="formData.hrManagerDate" type="date" value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd" placeholder="选择日期"
                                :picker-options="signDateOptions"></el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>部门经理</td>
                        <td><input v-model="formData.departmentManagerSignature" type="text"></td>
                        <td>
                            <el-date-picker v-model="formData.departmentManagerDate" type="date"
                                value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期"
                                :picker-options="signDateOptions"></el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>部门主管</td>
                        <td><input v-model="formData.departmentSupervisorSignature" type="text"></td>
                        <td>
                            <el-date-picker v-model="formData.departmentSupervisorDate" type="date"
                                value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期"
                                :picker-options="signDateOptions"></el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>企业管理部</td>
                        <td><input v-model="formData.corporateManagementSignature" type="text"></td>
                        <td>
                            <el-date-picker v-model="formData.corporateManagementDate" type="date"
                                value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期"
                                :picker-options="signDateOptions"></el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>总经理</td>
                        <td><input v-model="formData.generalManagerSignature" type="text"></td>
                        <td>
                            <el-date-picker v-model="formData.generalManagerDate" type="date" value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd" placeholder="选择日期"
                                :picker-options="signDateOptions"></el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>部门部长/总监</td>
                        <td><input v-model="formData.departmentDirectorSignature" type="text"></td>
                        <td>
                            <el-date-picker v-model="formData.departmentDirectorDate" type="date"
                                value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期"
                                :picker-options="signDateOptions"></el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>总裁/董事长</td>
                        <td><input v-model="formData.presidentSignature" type="text"></td>
                        <td>
                            <el-date-picker v-model="formData.presidentDate" type="date" value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd" placeholder="选择日期"
                                :picker-options="signDateOptions"></el-date-picker>
                        </td>
                    </tr>
                </tbody>
            </table>

            <span style="text-align: left;">
                <p>签批流程：部门主管 → 部门经理 → 人资主管/经理 → 部门部长/总监 → 总经理 → 企业管理部 → 总裁/董事长</p>
                <p>注：1、新员工如有意见反馈得不到反馈对象及时的解决或处理，则可反馈到公司工会或公司"心灵之约"活动室。</p>
                <p>2、本人对以上信息己熟知并同意按公司的薪资管理制度实施。</p>
            </span>
            <p>员工签名： <input style="width: 20%;" v-model="formData.employeeSignature" type="text"> 日期：
                <el-date-picker v-model="formData.employeeDate" type="date" value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd" placeholder="选择日期" :picker-options="signDateOptions"></el-date-picker>
            </p>

        </el-form>
    </div>
</template>

<script>
import { createEmployeeVerification, updateEmployeeVerification, getEmployeeVerification } from '@/api/employeeVerification'
import { Message } from 'element-ui'

import { formatDate } from '@/utils/date';
import dayjs from 'dayjs';

export default {
    data() {
        return {
            formData: {
                recruitmentAgent: '',
                interviewer: '',
                interviewTime: '',
                reportTime: '',
                department: '',
                position: '',
                onboardingTrainer: '',
                preJobTrainer: '',
                mentorPosition: '',
                careerMentor: '',
                basicSalary: 0,
                basicSalaryNote: '',
                overtimePay: 0,
                overtimePayNote: '',
                seniority: 0,
                seniorityNote: '',
                performancePay: 0,
                performancePayNote: '',
                postAllowance: 0,
                postAllowanceNote: '',
                otherPay: 0,
                otherPayNote: '',
                hrManagerSignature: '',
                hrManagerDate: '',
                departmentManagerSignature: '',
                departmentManagerDate: '',
                departmentSupervisorSignature: '',
                departmentSupervisorDate: '',
                corporateManagementSignature: '',
                corporateManagementDate: '',
                generalManagerSignature: '',
                generalManagerDate: '',
                departmentDirectorSignature: '',
                departmentDirectorDate: '',
                presidentSignature: '',
                presidentDate: '',
                employeeSignature: '',
                employeeDate: ''
            },
            isEdit: false,
            isView: false,
            datePickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一个月前',
                    onClick(picker) {
                        const date = new Date();
                        date.setMonth(date.getMonth() - 1);
                        picker.$emit('pick', date);
                    }
                }],
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            signDateOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }],
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            }
        }
    },
    created() {
        const id = this.$route.query.id
        const type = this.$route.query.type
        if (id) {
            this.isEdit = true
            this.loadData(id)
            if (type === 'view') {
                this.isView = true
            }
        } else {
            // 初始化默认值
            this.formData = {
                recruitmentAgent: '',
                interviewer: '',
                interviewTime: '',
                reportTime: '',
                department: '',
                position: '',
                onboardingTrainer: '',
                preJobTrainer: '',
                mentorPosition: '',
                careerMentor: '',
                basicSalary: 0,
                basicSalaryNote: '',
                overtimePay: 0,
                overtimePayNote: '',
                seniority: 0,
                seniorityNote: '',
                performancePay: 0,
                performancePayNote: '',
                postAllowance: 0,
                postAllowanceNote: '',
                otherPay: 0,
                otherPayNote: '',
                hrManagerSignature: '',
                hrManagerDate: '',
                departmentManagerSignature: '',
                departmentManagerDate: '',
                departmentSupervisorSignature: '',
                departmentSupervisorDate: '',
                corporateManagementSignature: '',
                corporateManagementDate: '',
                generalManagerSignature: '',
                generalManagerDate: '',
                departmentDirectorSignature: '',
                departmentDirectorDate: '',
                presidentSignature: '',
                presidentDate: '',
                employeeSignature: '',
                employeeDate: ''
            }
        }
    },
    methods: {
        calculateTotal() {
            return (
                parseFloat(this.formData.basicSalary || 0) +
                parseFloat(this.formData.overtimePay || 0) +
                parseFloat(this.formData.seniority || 0) +
                parseFloat(this.formData.performancePay || 0) +
                parseFloat(this.formData.postAllowance || 0) +
                parseFloat(this.formData.otherPay || 0)
            )
        },
        async loadData(id) {
            try {
                const res = await getEmployeeVerification(id)
                console.log("res" + res);
                this.formData = res.data
                this.formData.interviewTime = formatDate(this.formData.interviewTime)
                this.formData.reportTime = formatDate(this.formData.reportTime)
                this.formData.hrManagerDate = formatDate(this.formData.hrManagerDate)
                this.formData.departmentManagerDate = formatDate(this.formData.departmentManagerDate)
                this.formData.departmentSupervisorDate = formatDate(this.formData.departmentSupervisorDate)
                this.formData.corporateManagementDate = formatDate(this.formData.corporateManagementDate)
                this.formData.generalManagerDate = formatDate(this.formData.generalManagerDate)
                this.formData.departmentDirectorDate = formatDate(this.formData.departmentDirectorDate)
                this.formData.presidentDate = formatDate(this.formData.presidentDate)
                this.formData.employeeDate = formatDate(this.formData.employeeDate)
            } catch (error) {
                Message.error('加载数据失败')
            }
        },
        async handleSubmit() {
            try {
                this.formData.interviewTime = formatDate(this.formData.interviewTime)
                this.formData.reportTime = formatDate(this.formData.reportTime)
                this.formData.hrManagerDate = formatDate(this.formData.hrManagerDate)
                this.formData.departmentManagerDate = formatDate(this.formData.departmentManagerDate)
                this.formData.departmentSupervisorDate = formatDate(this.formData.departmentSupervisorDate)
                this.formData.corporateManagementDate = formatDate(this.formData.corporateManagementDate)
                this.formData.generalManagerDate = formatDate(this.formData.generalManagerDate)
                this.formData.departmentDirectorDate = formatDate(this.formData.departmentDirectorDate)
                this.formData.presidentDate = formatDate(this.formData.presidentDate)
                this.formData.employeeDate = formatDate(this.formData.employeeDate)

                if (this.isEdit) {
                    await updateEmployeeVerification(this.$route.query.id, this.formData)
                    Message.success('更新成功')
                } else {
                    await createEmployeeVerification(this.formData)
                    Message.success('保存成功')
                }
                this.$router.push('/main/biao/hedingList')
            } catch (error) {
                console.error('保存失败:', error)
                Message.error(error.message || '操作失败，请检查网络连接或联系管理员')
            }
        },
        handleReset() {
            this.$refs.form.resetFields()
        },
        goBack() {
            this.$router.push('/main/biao')
        },
        goToList() {
            this.$router.push('/main/biao/hedingList')
        },
        handlePrint() {
            window.print()
        },
        handleDateChange(field) {
            if (field === 'interviewTime' && this.formData.interviewTime && !this.formData.reportTime) {
                // 如果设置了面试时间但没有报到时间，默认将报到时间设置为面试时间后一周
                const reportDate = new Date(this.formData.interviewTime);
                reportDate.setDate(reportDate.getDate() + 7);
                this.formData.reportTime = formatDate(reportDate);
            }

            // 自动设置签名日期
            if (field === 'reportTime' && this.formData.reportTime) {
                // 如果设置了报到时间，自动设置部门主管签名日期为同一天
                this.formData.departmentSupervisorDate = this.formData.reportTime;
            }
        },
        validateDates() {
            if (this.formData.reportTime && this.formData.interviewTime) {
                const interview = new Date(this.formData.interviewTime);
                const report = new Date(this.formData.reportTime);

                // 检查报到时间是否早于面试时间
                if (report < interview) {
                    this.$message.warning('报到时间不能早于面试时间');
                    this.formData.reportTime = this.formData.interviewTime;
                    return;
                }

                // 检查报到时间是否距离面试时间太远（超过30天）
                const diffDays = dayjs(report).diff(dayjs(interview), 'day');
                if (diffDays > 30) {
                    this.$message.warning('报到时间与面试时间间隔超过30天，请确认是否正确');
                }
            }

            // 验证签名日期的顺序
            this.validateSignatureDates();
        },
        validateSignatureDates() {
            const signatureOrder = [
                { field: 'departmentSupervisorDate', name: '部门主管' },
                { field: 'departmentManagerDate', name: '部门经理' },
                { field: 'hrManagerDate', name: '人资主管/经理' },
                { field: 'departmentDirectorDate', name: '部门部长/总监' },
                { field: 'generalManagerDate', name: '总经理' },
                { field: 'corporateManagementDate', name: '企业管理部' },
                { field: 'presidentDate', name: '总裁/董事长' }
            ];

            let lastDate = null;
            for (const item of signatureOrder) {
                const currentDate = this.formData[item.field];
                if (currentDate && lastDate) {
                    if (new Date(currentDate) < new Date(lastDate)) {
                        this.$message.warning(`${item.name}的签名日期不能早于上一级审批日期`);
                        this.formData[item.field] = lastDate;
                    }
                }
                if (currentDate) {
                    lastDate = currentDate;
                }
            }
        },
        autoFillNextDate(currentField) {
            const signatureOrder = [
                'departmentSupervisorDate',
                'departmentManagerDate',
                'hrManagerDate',
                'departmentDirectorDate',
                'generalManagerDate',
                'corporateManagementDate',
                'presidentDate'
            ];

            const currentIndex = signatureOrder.indexOf(currentField);
            if (currentIndex > -1 && currentIndex < signatureOrder.length - 1) {
                const nextField = signatureOrder[currentIndex + 1];
                if (!this.formData[nextField]) {
                    this.formData[nextField] = this.formData[currentField];
                }
            }
        }
    },
    watch: {
        'formData.reportTime': {
            handler: 'validateDates'
        },
        'formData.departmentSupervisorDate'(val) {
            if (val) this.autoFillNextDate('departmentSupervisorDate');
        },
        'formData.departmentManagerDate'(val) {
            if (val) this.autoFillNextDate('departmentManagerDate');
        },
        'formData.hrManagerDate'(val) {
            if (val) this.autoFillNextDate('hrManagerDate');
        },
        'formData.departmentDirectorDate'(val) {
            if (val) this.autoFillNextDate('departmentDirectorDate');
        },
        'formData.generalManagerDate'(val) {
            if (val) this.autoFillNextDate('generalManagerDate');
        },
        'formData.corporateManagementDate'(val) {
            if (val) this.autoFillNextDate('corporateManagementDate');
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    min-height: 100vh;
    position: relative;
}

.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(45deg, rgba(64, 158, 255, 0.05), rgba(103, 194, 58, 0.05));
    z-index: -1;
    border-bottom-left-radius: 50% 20%;
    border-bottom-right-radius: 50% 20%;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    padding: 20px;
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.back-button {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.back-button .el-button {
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.back-button .el-button:hover {
    transform: translateX(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-header h1 {
    font-size: 24px;
    color: #2c3e50;
    margin: 0;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;
}

.page-header h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #409EFF, #67C23A);
    border-radius: 3px;
}

.header-actions {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 12px;
}

.header-actions .el-button {
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.header-actions .el-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.el-form {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 24px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ebeef5;
    background: #fff;

    td {
        padding: 8px;
        vertical-align: middle;
        position: relative;

        .el-input,
        .el-date-picker {
            width: 100%;

            .el-input__inner {
                padding: 0 8px;
                height: 32px;
                line-height: 32px;
            }
        }

        input {
            width: 100%;
            padding: 4px 8px;
            height: 32px;
            line-height: 32px;
            box-sizing: border-box;
            margin: 0;
        }

        input[type="number"] {
            width: 100%;
            text-align: right;
            padding-right: 12px;
        }
    }
}

table thead {
    background: linear-gradient(45deg, rgba(64, 158, 255, 0.05), rgba(103, 194, 58, 0.05));
}

table thead th {
    font-weight: 600;
    color: #2c3e50;
    padding: 12px 16px;
    border-bottom: 2px solid #ebeef5;
}

table tbody tr {
    transition: all 0.3s ease;
}

table tbody tr:hover {
    background-color: rgba(64, 158, 255, 0.05);
}

table th,
table td {
    border: 1px solid #ebeef5;
    padding: 12px 16px;
    text-align: center;
    font-size: 14px;
}

table th:first-child,
table td:first-child {
    background-color: rgba(248, 249, 250, 0.5);
    font-weight: 500;
    color: #2c3e50;
    width: 180px;
}

.el-input .el-input__inner,
.el-date-picker .el-input__inner {
    border-radius: 6px;
    border: 1px solid #dcdfe6;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

.el-input .el-input__inner:hover,
.el-input .el-input__inner:focus,
.el-date-picker .el-input__inner:hover,
.el-date-picker .el-input__inner:focus {
    border-color: #409EFF;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    transition: all 0.3s ease;
    outline: none;
}

input:hover,
input:focus {
    border-color: #409EFF;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

input[type="date"] {
    width: 150px;
}

input[type="number"] {
    width: 120px;
}

.form-actions {
    margin-bottom: 30px;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
}

.form-actions .el-button {
    padding: 12px 30px;
    font-size: 14px;
    border-radius: 8px;
    margin: 0 10px;
    transition: all 0.3s ease;
}

.form-actions .el-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.form-actions .el-button.el-button--primary {
    background: linear-gradient(45deg, #409EFF, #36a3ff);
    border: none;
}

.process-info {
    margin-top: 24px;
    padding: 20px;
    background: rgba(248, 249, 250, 0.5);
    border-radius: 8px;
    border: 1px solid #ebeef5;
}

.process-info p {
    margin: 8px 0;
    color: #606266;
    font-size: 14px;
    line-height: 1.6;
}

.process-info p:first-child {
    color: #2c3e50;
    font-weight: 500;
}

.employee-signature {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.employee-signature input {
    width: auto;
    min-width: 200px;
}

@media screen and (max-width: 768px) {
    .container {
        padding: 16px;
    }

    .page-header {
        padding: 16px;
        margin-bottom: 20px;
    }

    .page-header h1 {
        font-size: 20px;
    }

    .header-actions {
        position: static;
        transform: none;
        margin-top: 16px;
        justify-content: center;
    }

    .el-form {
        padding: 16px;
    }

    table th,
    table td {
        padding: 8px;
        font-size: 13px;
    }

    table th:first-child,
    table td:first-child {
        width: auto;
    }

    .form-actions .el-button {
        width: 100%;
        margin: 8px 0;
    }

    .employee-signature {
        flex-direction: column;
        gap: 12px;
    }

    .employee-signature input {
        width: 100%;
    }

    .back-button {
        position: static;
        margin-bottom: 10px;
        transform: none;
    }

    .back-button .el-button {
        width: auto;
    }
}

/* 打印样式 */
@media print {
    .container {
        margin: 0;
        padding: 0;
        background: none;
        min-height: auto;
    }

    .container::before {
        display: none;
    }

    .page-header {
        margin: 0 0 20px;
        padding: 0;
        background: none;
        box-shadow: none;
    }

    .header-actions,
    .form-actions {
        display: none !important;
    }

    .el-form {
        padding: 0;
        background: none;
        box-shadow: none;
    }

    table {
        page-break-inside: auto;
        border: 1px solid #000;
        margin-bottom: 20px;
    }

    table thead {
        background: none;
    }

    table th,
    table td {
        border: 1px solid #000;
        padding: 8px;
        color: #000 !important;
    }

    table th:first-child,
    table td:first-child {
        background: none;
    }

    ::v-deep .el-input__inner {
        border: none !important;
    }

    input,
    .el-input .el-input__inner,
    .el-date-picker .el-input__inner {
        border: none;
        padding: 0;
        color: #000;
        box-shadow: none;
        background: none;
    }

    input[type="date"],
    input[type="number"] {
        width: auto;
    }

    p {
        margin: 8px 0;
        color: #000;
        page-break-inside: avoid;
    }

    .employee-signature {
        margin-top: 30px;
        page-break-inside: avoid;
    }

    .employee-signature input {
        border-bottom: 1px solid #000;
    }

    /* 避免表格在打印时被分页 */
    tbody tr {
        page-break-inside: avoid;
    }

    /* 确保签名区域不被分页 */
    table:last-of-type {
        page-break-inside: avoid;
    }

    .back-button {
        display: none !important;
    }
}

::v-deep .el-form-item {
    margin-left: 0px !important;
}

:deep(.el-date-picker) {
    width: 100%;

    .el-input__inner {
        height: 32px;
        line-height: 32px;
        padding: 0 8px;
        font-size: 14px;

        &:hover {
            border-color: #409EFF;
        }

        &:focus {
            border-color: #409EFF;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
        }
    }

    .el-input__prefix {
        left: 8px;
    }
}

.el-date-picker__header-label {
    font-size: 16px;
    font-weight: 600;
}

.el-picker-panel__content {
    margin: 15px;
}

.el-date-table th {
    padding: 5px;
    color: #606266;
}

.el-date-table td {
    padding: 0;
    height: 32px;

    &.available:hover {
        color: #409EFF;
    }

    &.today span {
        color: #409EFF;
        font-weight: bold;
    }

    &.current span {
        background-color: #409EFF;
        color: #fff;
    }
}

.el-picker-panel__footer {
    padding: 4px;

    .el-button {
        font-size: 12px;
        padding: 6px 12px;
    }
}

// 调整签名表格的样式
table:last-of-type {
    td:nth-child(2) {
        input {
            text-align: center;
        }
    }

    td:last-child {
        .el-date-picker {
            width: 100%;
        }
    }
}

// 调整薪资表格的样式
table:nth-of-type(2) {
    td:nth-child(2) {
        width: 120px;

        input {
            text-align: center;
        }
    }

    td:last-child {
        width: auto;
        min-width: 200px;
    }
}

// 调整第一个表格的样式
table:first-of-type {

    td:nth-child(2),
    td:nth-child(4) {
        width: 25%;
    }
}

// 员工签名区域样式调整
.employee-signature {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;

    input {
        width: 160px !important;
        text-align: center;
    }

    .el-date-picker {
        width: 160px !important;
    }
}

@media screen and (max-width: 768px) {
    table {
        td {
            padding: 6px;

            input,
            .el-input__inner {
                font-size: 13px;
                padding: 0 6px;
            }
        }
    }

    .employee-signature {
        flex-wrap: wrap;

        input {
            border: none;
        }


        input,
        .el-date-picker {
            width: 100% !important;
            border: none;
        }
    }
}
</style>